<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_全屏遮罩</title>
    <style>
        * {margin: 0;}
        .mask {
            background-color: rgba(0,0,0,0.4);
            /*width: 200px;*/
            /*height: 400px;*/
            position: fixed;
            /*top: 0;*/
            /*bottom: 0;*/
            /*left: 0;*/
            /*right: 0;*/
            /*  视口(viewport):展示页面内容的整个窗口 */
            width: 100vw; /*撑满全屏宽 100%的视口宽度 */
            height: 100vh; /*撑满全屏高 100%的视口高度 */
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, nihil, non! A corporis culpa dolorem
        eos fugiat iure molestiae officiis perferendis quam quia reprehenderit similique, tempora veniam? Doloribus,
        magni, similique!
    </div>
    <div>Harum illo mollitia nemo sit. Ab aliquid, asperiores aspernatur culpa debitis dicta dolore dolores eius
        eligendi explicabo ipsa laborum, maiores minima neque odio odit qui quod recusandae rem sunt voluptates.
    </div>
    <div>Assumenda commodi culpa deleniti earum eveniet, id in magni quod ratione suscipit tempore ullam vitae
        voluptates! Nam, nobis quos. Commodi consectetur, cum debitis mollitia nam nihil nostrum porro sapiente! Ipsam.
    </div>
    <div>Assumenda consectetur eos est et expedita maxime molestiae officiis quae quia tempore. Accusamus aliquam
        consequatur dolore, dolorum eos excepturi praesentium rerum unde ut. Architecto eligendi eveniet inventore
        laborum quasi voluptas!
    </div>
    <div>Alias aliquid, consequuntur corporis ipsa iste iure laudantium, molestiae nisi non perferendis quasi qui quod
        repellendus. Alias atque autem exercitationem fugit itaque, laboriosam magnam maiores pariatur perspiciatis sunt
        tempora, voluptas!
    </div>
    <div>Aliquid exercitationem id ipsam provident quisquam? Asperiores at eligendi esse eveniet fugiat laborum mollitia
        provident suscipit unde voluptatum! Architecto culpa modi molestias numquam omnis, repellat sequi soluta tempore
        ut voluptates.
    </div>
    <div>Debitis error exercitationem labore libero officiis quos similique veniam. Nisi numquam, quas! Amet aspernatur
        deserunt, ex illum in ipsum minus porro sit temporibus tenetur? Cupiditate fuga laborum libero nihil quibusdam.
    </div>
    <div>Ad consectetur debitis ipsum nam nobis perferendis, quisquam repellat repellendus sunt voluptatem? Aliquid,
        dignissimos dolorem itaque magni necessitatibus obcaecati quae qui sint voluptate? Animi dolores dolorum
        molestias perferendis repudiandae sapiente.
    </div>
    <div>Accusantium aut est, labore natus obcaecati odit quae sint soluta unde velit. At atque consequatur cumque
        debitis deserunt dolores, eius, enim in ipsa nisi numquam officiis perspiciatis quidem, rem veniam?
    </div>
    <div>Cumque dignissimos dolorum error explicabo minus nostrum tenetur ut? A dolor dolorum fugiat illo in ipsa
        magnam, magni, nisi non nostrum quidem quisquam sequi temporibus. Consectetur officia recusandae sequi
        voluptatem.
    </div>
    <div>Assumenda commodi cupiditate debitis earum expedita illum libero nam nostrum praesentium voluptates! Aperiam
        deleniti dicta ea, harum ipsum iste libero maxime natus nulla perspiciatis, quaerat qui, quos recusandae
        suscipit ullam.
    </div>
    <div>Eaque explicabo nisi possimus tempore. Aliquid earum est quam sequi? Ex obcaecati perspiciatis quibusdam
        repudiandae vitae? Asperiores dolorem dolorum, earum facere iste magnam molestias officiis quae, quos rem rerum
        totam?
    </div>
    <div>Alias dicta, dolore! Aspernatur, ea voluptates. Accusamus aliquid architecto assumenda eos est iure nostrum quo
        suscipit vero. Amet autem consequatur dolorum nostrum nulla officia praesentium repellendus tempora tenetur,
        veniam voluptates?
    </div>
    <div>Accusantium dignissimos explicabo necessitatibus perferendis saepe? Adipisci asperiores, aut beatae dolore
        eaque earum ipsam magnam nemo nisi officiis possimus quibusdam repellendus sed similique unde ut vel. Laudantium
        maxime nisi soluta!
    </div>
    <div>Beatae est quae rerum voluptatibus. Ad animi harum placeat porro voluptate! Adipisci aperiam autem culpa
        distinctio, esse illum in ipsa ipsam itaque labore possimus reprehenderit repudiandae similique sunt tenetur
        voluptatibus.
    </div>
    <div>Distinctio ea ipsam minus nemo, placeat provident recusandae repellendus! Dolor dolore laboriosam mollitia nam
        numquam provident soluta tempora vitae voluptas! Amet est maxime molestiae necessitatibus obcaecati placeat
        possimus praesentium rerum?
    </div>
    <div>Cumque delectus dolores doloribus dolorum earum eos itaque mollitia temporibus. Consectetur, consequatur earum
        ex facere fuga labore laudantium maiores minima omnis quaerat, quasi quia ratione reiciendis rem repellat sed
        voluptate.
    </div>
    <div>Dolor dolore esse, facilis illum in quod recusandae repudiandae veniam! Accusamus aspernatur delectus, deleniti
        ducimus eum facere incidunt laudantium libero modi nemo nobis nulla officia porro saepe ullam voluptas
        voluptatibus.
    </div>
    <div>A, ab accusantium amet aspernatur at autem commodi cum, ducimus ea eligendi enim ex facilis fugiat harum illo,
        inventore mollitia nihil nisi obcaecati odio repudiandae saepe similique ut? Dolorem, modi.
    </div>
    <div>Accusantium ad at consectetur consequatur dignissimos dolore, esse est eveniet explicabo, molestiae, neque
        nesciunt odit officiis porro praesentium quisquam quod ratione soluta tempore veniam. Adipisci commodi cum natus
        officiis quisquam!
    </div>
    <div>Culpa ex nobis quas voluptatibus? Asperiores, autem, commodi cumque cupiditate dicta doloribus et, hic
        laudantium libero nisi nulla numquam quis quod repudiandae voluptates voluptatibus voluptatum? Dolor, dolorem,
        sint. Aperiam, tempore.
    </div>
    <div>A accusamus architecto blanditiis consequatur dicta ducimus ea, excepturi explicabo facere fuga fugiat fugit
        labore magni molestias nesciunt nulla numquam porro qui quis recusandae sapiente tenetur vitae. At itaque,
        reprehenderit!
    </div>
    <div>Accusantium at autem delectus distinctio doloremque dolores ducimus earum et facilis, iste magnam minima
        nostrum omnis pariatur quibusdam quidem reiciendis repellat, sed sit ut? Aliquid corporis et nisi non soluta.
    </div>
    <div>Esse nesciunt odio sed? Aspernatur blanditiis eaque facere incidunt libero maiores numquam quae qui veniam?
        Deserunt est, facere odio optio tempora velit veniam! Atque est, itaque magnam quae quisquam veritatis?
    </div>
    <div>A aliquid asperiores consectetur in neque rem tempora ullam! Ab amet atque deserunt doloribus dolorum quas
        suscipit vero! Cupiditate deserunt nesciunt quia quo saepe sed voluptate. Amet necessitatibus placeat repellat.
    </div>
    <div>Aliquid animi assumenda consequuntur cupiditate deleniti dolores doloribus enim eum facere fugiat id itaque
        labore maxime minus non nulla perspiciatis praesentium provident quaerat repellat sit soluta ullam veniam vero,
        vitae.
    </div>
    <div>Ad nisi perferendis quisquam ratione temporibus vero. Aut, cupiditate dignissimos eius error est expedita
        itaque magni neque odio officiis optio quas quo sed soluta tempora tenetur voluptatem. Alias laborum,
        reiciendis!
    </div>
    <div>Cumque debitis dolorum est harum hic necessitatibus, pariatur repellat sed similique. Ab, aliquam cum eos error
        expedita facere facilis ipsum iusto magnam maiores minus nostrum pariatur quod quos voluptatibus. Adipisci.
    </div>
    <div>Ab alias aliquam cum deleniti dicta, distinctio dolores, eaque et id inventore itaque iure libero maiores
        molestias nam nemo pariatur perferendis perspiciatis quae quis quisquam repudiandae tempore totam vel velit.
    </div>
    <div>Architecto at consectetur, doloribus eius eveniet hic magni molestias numquam obcaecati officiis praesentium
        quae quaerat quo reiciendis sit? Aliquam animi deserunt dolores fugiat iure libero natus neque officia, sed
        suscipit.
    </div>
    <div>Ab, ad, aperiam assumenda autem deserunt et ex laudantium nihil omnis quia quidem quisquam reprehenderit sit
        sunt veniam? Aut esse maiores officia. Amet assumenda cum, ipsum nesciunt quae quidem quos!
    </div>
    <div>Debitis dolor eaque est, eveniet illum incidunt laborum maxime odit praesentium reprehenderit sit suscipit
        temporibus vitae. Est laudantium molestiae rem vitae. Consequuntur iste laudantium nemo nobis provident
        repudiandae unde voluptate!
    </div>
    <div>Ab, accusamus alias cumque delectus dicta dolor doloribus fugiat in itaque magni minus molestias natus odio
        officia, possimus, quas qui quis repellendus velit veritatis. Aut consectetur earum eum reiciendis vel?
    </div>
    <div>At exercitationem hic iste minima modi rerum sed. Accusamus accusantium architecto, aspernatur aut consequuntur
        dicta dolor est exercitationem fuga id illo incidunt iste molestiae numquam odio quasi recusandae tempore, vel.
    </div>
    <div>At minus officia quibusdam rem sit? Accusamus amet architecto at corporis dolore ea earum, et eveniet ex
        expedita hic in incidunt iure labore nisi nobis porro praesentium sed vero voluptatem.
    </div>
    <div>Ad architecto asperiores consectetur culpa, cumque delectus distinctio doloremque error esse fugiat, harum
        illum ipsum labore libero molestias nam nisi non omnis possimus quas quia repellat saepe tenetur veritatis
        voluptate.
    </div>
    <div>Ad aliquid aspernatur dolorem ducimus eveniet fuga harum illum, incidunt laudantium magnam maxime
        necessitatibus neque nesciunt pariatur porro quas quasi quia quibusdam quisquam quod recusandae repellat sunt,
        tempore velit veniam!
    </div>
    <div>At excepturi in, ipsam iste magnam optio perferendis repellat ut? Doloribus in rerum tenetur velit veritatis.
        Animi, assumenda consectetur dolore eveniet iste nostrum optio quod! Corporis cupiditate dolorum illum porro.
    </div>
    <div>Ad aliquam dolore enim error qui tempora! Consectetur culpa, dolorum ea excepturi explicabo harum illum itaque
        molestiae, nobis provident qui quisquam, quo reiciendis ullam unde. Mollitia neque odit officia sint.
    </div>
    <div>Aut culpa debitis impedit minus natus odio quam reprehenderit soluta tempora voluptatibus? Deleniti enim, harum
        itaque iure odit quam rem similique sint vero voluptas? Autem cumque deleniti laborum repellendus similique.
    </div>
    <div>Animi aspernatur commodi cum exercitationem iste molestias obcaecati sapiente sequi tempore voluptate.
        Accusamus atque commodi cum debitis dolore ipsa iure magnam molestias, quae quaerat quia quis repudiandae sit
        soluta sunt.
    </div>
    <div>Beatae consectetur cupiditate, eaque est eum excepturi facere fugiat iste, laboriosam maxime molestias nam non
        possimus rem repellat repudiandae temporibus unde, velit vitae voluptatem? Asperiores corporis earum ratione
        suscipit veniam?
    </div>
    <div>Atque cupiditate debitis eaque ex inventore magnam nesciunt nostrum perspiciatis praesentium quis? Ad culpa
        dicta dolor eos error impedit maiores nemo officia pariatur provident quisquam, quo tempore veritatis?
        Excepturi, numquam.
    </div>
    <div>Aperiam dolor dolore ducimus, impedit nulla praesentium quisquam ratione sapiente voluptas. Assumenda at autem
        blanditiis deleniti, deserunt dignissimos dolorem esse et facere, iusto officia officiis, optio quis sequi
        soluta vel.
    </div>
    <div>Amet aperiam asperiores atque beatae corporis debitis dolore dolorum ea ex expedita fugiat labore magni, nam,
        natus, officiis omnis possimus sed sint sit soluta sunt tempora temporibus ut veniam voluptatibus.
    </div>
    <div>Doloremque in minus non, rem vel veritatis voluptates. Aspernatur delectus dicta facilis inventore iste
        molestiae odit perspiciatis suscipit tempore voluptatibus! Delectus natus nobis odit quo temporibus ut!
        Accusamus, inventore perferendis!
    </div>
    <div>Commodi doloremque eum, facere harum labore maiores. Amet aperiam aspernatur blanditiis dolorum esse est ex
        fugiat harum, illum laudantium non nostrum placeat quasi repellendus saepe similique temporibus ullam, vitae,
        voluptas.
    </div>
    <div>Accusamus aut beatae cupiditate labore neque rerum sunt suscipit tempora vel. Accusamus architecto commodi,
        dolorem eos facere fugit nihil nulla quia quo recusandae, repellat vel voluptas. Ex explicabo minima quam!
    </div>
    <div>Aperiam atque, culpa deleniti dolore doloremque expedita facere in itaque, maxime minima mollitia neque, nobis
        provident qui repellat vero voluptas. Cum delectus laboriosam minima nemo quasi quod sed similique, voluptas!
    </div>
    <div>Accusantium blanditiis commodi consequatur culpa debitis dolore doloremque ducimus ea eaque error eum ex in,
        ipsam labore molestias nobis numquam obcaecati, porro quibusdam, quis quisquam sed tempore totam ullam ut.
    </div>
    <div>Commodi dolor dolores eligendi eveniet itaque nulla porro quae voluptatum. Animi autem, consectetur dignissimos
        dolore doloremque, ducimus enim est et minima nobis numquam, officia perspiciatis quis recusandae reiciendis
        suscipit vitae.
    </div>
    <div>Debitis dicta illo ipsum nulla optio! Ea excepturi officia omnis quibusdam voluptatem. Consequuntur distinctio
        earum eos error facere nemo nesciunt pariatur perspiciatis qui, quibusdam! Aliquam culpa deserunt mollitia quasi
        qui!
    </div>
    <div>Ad adipisci amet atque autem consequatur consequuntur deserunt ea est eum expedita facilis libero minus
        nesciunt, nisi odit officiis, pariatur possimus quisquam ratione repellat saepe suscipit tempora unde veritatis
        vero!
    </div>
    <div>Accusamus architecto dicta doloribus ducimus ea enim esse et eum exercitationem itaque non, nulla quisquam
        quod, repellat unde. Accusantium consequuntur dolor, eaque fugiat magnam maiores quam similique unde veritatis
        voluptatibus.
    </div>
    <div>Earum optio quam recusandae veritatis? Adipisci dolorum enim hic pariatur ut? Aliquam culpa delectus eligendi
        eum harum illum laborum libero nisi officia officiis placeat sequi sunt, suscipit temporibus vel veritatis?
    </div>
    <div>A aut dolorem eligendi exercitationem ipsa nostrum omnis pariatur porro, possimus, sunt tempore voluptatum. Eum
        facere fuga quia quidem temporibus totam, vero. Consequatur culpa ea eaque enim eos in modi!
    </div>
    <div>Dolor esse suscipit veniam. Amet, asperiores consequatur distinctio eius enim facere fuga laboriosam laudantium
        maxime, neque non quia quibusdam? Eaque illo mollitia nemo nulla quia recusandae repudiandae saepe suscipit
        veritatis.
    </div>
    <div>Aliquid, amet beatae delectus deleniti distinctio dolore eos error est explicabo facere ipsum libero maiores
        modi molestiae nihil pariatur praesentium quae quam quas quibusdam ratione sit sunt suscipit vel voluptatibus?
    </div>
    <div>Ab architecto beatae dolores esse impedit perspiciatis repellendus, rerum temporibus voluptatibus! Ad amet,
        animi culpa cupiditate eveniet facilis harum iusto labore laboriosam mollitia officia possimus reiciendis
        tempora vel velit veniam.
    </div>
    <div>Ab architecto aspernatur corporis est eveniet nam officiis vel voluptates. Animi beatae eos fugit obcaecati
        pariatur porro, quidem sint. Commodi corporis, debitis ex nostrum quia voluptates? Dignissimos facilis
        necessitatibus repudiandae!
    </div>
</body>
</html>